<template>
  <div>
    <el-card>
      <!-- 档案信息 -->
      <info-model :params="paramsId"></info-model>
      <!-- 档案信息 end-->

      <!--  门（急）挂号记录 入院记录 核酸记录 疫苗接种  -->
      <ul class="tabs">
        <li :class="activeIndex==index?'active':''" v-for="(item,index) in tabsList" :key="index" @click="handleClick(index)">{{item}}</li>
      </ul>

      <!-- tabs切换内容 tabs-content -->
      <div class="tabs-content">
        <!-- 门（急）挂号记录   -->
        <!-- :params="" -->
        <register-list v-if="activeIndex==0" :params="paramsId"></register-list>
        <!--  入院记录  -->
        <admissionrecord-list v-if="activeIndex==1" :params="paramsId"></admissionrecord-list>
        <!--  核酸记录  -->
        <nucleicacid-list v-if="activeIndex==2" :params="paramsId"></nucleicacid-list>
        <!-- 疫苗接种  -->
        <vaccines-list v-if="activeIndex==3" :params="paramsId"></vaccines-list>
      </div>

    </el-card>
  </div>
</template>

<script>
/*  门（急）挂号记录 入院记录 核酸记录 疫苗接种 */
/* 门（急）挂号记录  */
import registerList from './model/registerList.vue'
/* 入院记录 */
import admissionrecordList from './model/admissionRecordList.vue'
/* 核酸记录 */
import nucleicacidList from './model/nucleicAcidList.vue'
/* 疫苗接种 */
import vaccinesList from './model/vaccinesList.vue'


/* 档案信息 */
import infoModel from './../model/infoModel.vue'

export default {
  name: "personalFilesDetails",
  /*  门（急）挂号记录 入院记录 核酸记录 疫苗接种 档案信息 */
  components: { registerList, admissionrecordList, nucleicacidList, vaccinesList, infoModel },
  data() {
    return {
      // tabs 数据
      tabsList: ['门(急)挂号记录', '入院记录', '核酸记录', '疫苗接种'],
      // tabs id
      activeIndex: '0',
      //接收id
      paramsId: this.$route.query.id
    }

  },
  created() {
    // this.init();
  },
  methods: {
    init() {

    },
    //   tabs 切换方法 
    handleClick(index) {
      this.activeIndex = index
      console.log("tabs id", this.activeIndex)
    }
  }
}
</script>

<style lang="less" scoped>
/* tabs */
.tabs {
  margin: 25px auto 15px;
  overflow: hidden;
  li {
    float: left;
    background: #e9e9e9;
    color: #666;
    width: 130px;
    text-align: center;
    padding: 10px 0;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
    &.active {
      background: #2f58a1;
      color: #fff;
    }
  }
}
</style>